import React from 'react'
import { LeftOutline, ClockCircleFill, AddressBookFill } from 'antd-mobile-icons'
import { LocationIcon } from 'tdesign-icons-react'
import '../style/shopping.css'
import { useState } from 'react'
import dai from '../img/代金卷.png'
import zhang from '../img/账户管理.png'
import yin from '../img/48银行卡.png'
import lian from '../img/联系客服.png'
import xiao from '../img/销售数据.png'
import juan from '../img/卷核销.png'
import shang from '../img/商家资料.png'
import { useNavigate } from 'react-router-dom'
import axios from '../../utils/http'
import { useEffect } from 'react'
import { useParams } from 'react-router-dom'

export default function shopping() {
    const [content] = useState([
        {
            id: 1,
            title: "商家资料",
            icon: <img src={shang} style={{ width: "7rem", marginTop: '1rem' }} />,
            router: '/massage'
        },
        {
            id: 2,
            title: "套餐/卷码管理",
            icon: <img src={dai} style={{ width: "8rem" }} />,
            router: ''
        },
        {
            id: 3,
            title: "卷核销",
            icon: <img src={juan} style={{ width: "8rem" }} />,
            router: ''
        },
        {
            id: 4,
            title: "销售数据",
            icon: <img src={xiao} style={{ width: "8rem" }} />,
            router: ''
        },
        {
            id: 5,
            title: "账户管理",
            icon: <img src={zhang} style={{ width: "7rem", marginTop: '1rem' }} />,
            router: ''
        },
        {
            id: 6,
            title: "我的银行卡",
            icon: <img src={yin} style={{ width: "8rem" }} />,
            router: ''
        },
        {
            id: 7,
            title: "联系客服",
            icon: <img src={lian} style={{ width: "7rem", marginTop: '1rem' }} />,
            router: ''
        },
    ])

    const navigate = useNavigate()
    const { id } = useParams()
    // const flagRef = createRef(false)

    const tiao = () => {
        window.history.back()
    }

    const [shop, setShop] = useState([])

    const getDetail = async () => {
        const res = await axios.get('/yjr/detail', { params: { _id: id } })
        console.log(res.detail);

        if (res.code == 200) {
            setShop(res.detail)
        }
    }

    const message = (router) => {
        navigate(router+`/${id}`)
    }

    useEffect(() => {
        getDetail()
    }, [])


    return (
        <div className='shop-box'>
            <div className='shop-header' style={{ backgroundImage: `url(${shop.doorPhotoImgUrl})`, backgroundSize: '100% 100%' }}>
                <LeftOutline className='left' onClick={tiao} />
            </div>
            <div>
                <div className='shop-body'>
                    <div>
                        <div className='shop-content'>
                            <h1 className='body-h1'>{shop.store}</h1>
                            <p className='body-p'>{shop.address} | {shop && shop.type ? shop.type.title : '加载中...'}</p>
                            <p className='body-p'>营业时间：{shop.businessTime}</p>
                            <div className='body-time'>
                                <ClockCircleFill className='time' />
                                <p>正常营业</p>
                            </div>
                        </div>

                        <div className='body-addr'>
                            <LocationIcon className='map' />
                            <p className='body-p'>{shop.detailAddr} 18F {shop.store}</p>
                        </div>
                    </div>

                    <div className='shop-body-div'>
                        {
                            content.map(item => {
                                return (
                                    <div className='body-div' key={item.id} onClick={() => message(item.router)}>
                                        <div>
                                            {item.icon}
                                        </div>

                                        <div>
                                            {item.title}
                                        </div>
                                    </div>
                                )
                            })
                        }

                    </div>
                </div>
            </div>
        </div>
    )
}
